import React, { useEffect, useState } from 'react';
import './IntegratedManage.css';
import { Input, Button, Table, message, Modal, Select, Radio } from 'antd';
import { DeleteOutlined, FormOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
import axios from 'axios';


export default function IntegratedManage() {
    const [query, setQuery] = useState('')  // 查询
    const [TipModalOpen, setTipModalOpen] = useState(false)  // 弹窗提示
    const [editModalOpen, setEditModalOpen] = useState(false)  // 编辑弹窗
    const [currentId, setCurrentId] = useState(null)  // 当前点击项id
    const queryChange = (e) => {  // 查询输入框变化
        setQuery(e.target.value)
    }

    const queryBtn = () => {  // 查询按钮
        axios.get('http://8.148.7.123:8000/bedtable/list', {
            params: {
                page: 1,
                size: 100,
                bednumber: query
            }
        }).then(res => {
            setTableData(() => {
                return res.data.data.map(item => {
                    return {
                        key: item.id,
                        ...item
                    }
                })
            })
        })
    }
    const handleOk = () => {  // 确认删除
        axios.get('http://8.148.7.123:8000/bedtable/del', {
            params: {
                id: currentId
            }
        }).then(res => {
            if (res.data.code === 1) {
                message.success('删除成功')
                getTableData();  // 更新表格数据
            } else {
                message.error('删除失败')
            }
        })
        setTipModalOpen(false);
    };
    const handleCancel = () => {
        setTipModalOpen(false);
    };
    const del = (id) => {  // 删除按钮
        setCurrentId(id)
        setTipModalOpen(true);
    }

    const edit = (record) => {  // 编辑按钮
        setBedId(record.bednumber)
        setDepartment(record.department)
        setOxygen(record.oxygen)
        setHeart(record.heart)
        setBreath(record.breath)
        setIcu(record.icu)
        setAircondition(record.aircondition)
        setTv(record.tv)
        setNurse(record.nurse)
        setEditModalOpen(true)
        getTableData();  // 更新表格数据
    }

    const editOk = () => {  // 编辑确认
        console.log(bedId, department, oxygen, heart, breath, icu, aircondition, tv, nurse)
        axios.get('http://8.148.7.123:8000/bedtable/edit', {
            params: {
                id: bedId,
                department: department,
                oxygen: oxygen,
                heart: heart,
                breath: breath,
                icu: icu,
                aircondition: aircondition,
                tv: tv,
                nurse: nurse
            }
        }).then(res => {
            console.log(res)
            if (res.data.code === 1) {
                message.success('修改成功')
                getTableData();  // 更新表格数据
            } else {
                message.error('修改失败')
            }
        })
        setEditModalOpen(false)
    }

    const editCancel = () => {  // 编辑取消
        setEditModalOpen(false)
    }
    // 表格列配置
    const columns = [
        {
            title: '床位编号',
            dataIndex: 'id',
        },
        {
            title: '所属科室',
            dataIndex: 'department',
        },
        {
            title: '责任护士',
            dataIndex: 'nurse',
        },
        {
            title: '配备氧气罐',
            dataIndex: 'oxygen',
            render: (text) => {
                if (text === 1) {
                    return <CheckOutlined style={{ color: 'green' }} />
                } else {
                    return <CloseOutlined style={{ color: 'red' }} />
                }
            }
        },
        {
            title: '配备心电机',
            dataIndex: 'heart',
            render: (text) => {
                if (text === 1) {
                    return <CheckOutlined style={{ color: 'green' }} />
                } else {
                    return <CloseOutlined style={{ color: 'red' }} />
                }
            }
        },
        {
            title: '配备呼吸机',
            dataIndex: 'breath',
            render: (text) => {
                if (text === 1) {
                    return <CheckOutlined style={{ color: 'green' }} />
                } else {
                    return <CloseOutlined style={{ color: 'red' }} />
                }
            }
        },
        {
            title: '配备急救设备',
            dataIndex: 'icu',
            render: (text) => {
                if (text === 1) {
                    return <CheckOutlined style={{ color: 'green' }} />
                } else {
                    return <CloseOutlined style={{ color: 'red' }} />
                }
            }
        },
        {
            title: '空调地暖',
            dataIndex: 'aircondition',
            render: (text) => {
                if (text === 1) {
                    return <CheckOutlined style={{ color: 'green' }} />
                } else {
                    return <CloseOutlined style={{ color: 'red' }} />
                }
            }
        },
        {
            title: '电视外设',
            dataIndex: 'tv',
            render: (text) => {
                if (text === 1) {
                    return <CheckOutlined style={{ color: 'green' }} />
                } else {
                    return <CloseOutlined style={{ color: 'red' }} />
                }
            }
        },
        {
            title: '床位操作',
            dataIndex: 'operate',
            render: (text, record) => (
                <div>
                    <DeleteOutlined className='delete_icon' onClick={() => del(record.id)} />
                    <FormOutlined className='edit_icon' onClick={() => edit(record)} />
                </div>
            )
        },

    ];
    const [messageApi, contextHolder] = message.useMessage()  // 弹窗提示
    const [tableData, setTableData] = useState([])
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [loading, setLoading] = useState(false);
    const [departmentList, setDepartmentList] = useState([]); // 所属科室列表
    const [nurseList, setNurseList] = useState([]);  // 责任护士列表
    const [department, setDepartment] = useState(null);  // 所属科室
    const [nurse, setNurse] = useState(null);  // 责任护士
    const [bedId, setBedId] = useState('');  // 床位编号
    const [oxygen, setOxygen] = useState(null);  // 氧气罐状态
    const [heart, setHeart] = useState(null);  // 心电机状态
    const [breath, setBreath] = useState(null);  // 呼吸机状态
    const [icu, setIcu] = useState(null);  // 急救设备状态
    const [aircondition, setAircondition] = useState(null);  // 空调地暖状态
    const [tv, setTv] = useState(null);  // 电视外设状态

    // const bedIdChange = (e) => {  // 床位编号无法修改
    //     setBedId(e.target.value);
    // };
    const oxygenChange = (e) => {
        setOxygen(e.target.value);
    };
    const heartChange = (e) => {
        setHeart(e.target.value);
    };
    const breathChange = (e) => {
        setBreath(e.target.value);
    };
    const icuChange = (e) => {
        setIcu(e.target.value);
    };
    const airconditionChange = (e) => {
        setAircondition(e.target.value);
    };
    const tvChange = (e) => {
        setTv(e.target.value);
    };

    const delChecked = () => {  // 删除选中项
        setLoading(true);
        setTimeout(() => {
            axios.get('http://8.148.7.123:8000/bedtable/batchdel', {
                params: {
                    ids: selectedRowKeys
                }
            }).then(res => {
                if (res.data.code === 1) {
                    messageApi.open({
                        type: 'success',
                        content: res.data.msg
                    })
                } else {
                    messageApi.open({
                        type: 'error',
                        content: '删除失败'
                    })
                }
                getTableData();  // 更新表格数据
            })
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };
    const onSelectChange = (newSelectedRowKeys) => {  // 选中项变化时触发
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {  // 行选择器配置
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;  // 是否有选中项
    const getTableData = () => {  // 获取表格数据
        axios.get('http://8.148.7.123:8000/bedtable/list', {
            params: {
                page: 1,
                size: 100,
                bednumber: ''
            }
        }).then(res => {
            setTableData(() => {
                return res.data.data.map(item => {
                    return {
                        key: item.id,
                        ...item
                    }
                })
            })
        }).catch(err => {
            console.log(err)
        })
    }
    // 获取科室列表
    const getDepartmentList = () => {
        axios.get('http://8.148.7.123:8000/department/departnames')
            .then(res => {
                setDepartmentList(res.data.data.map(item => {
                    return {
                        value: item.name,
                        label: item.name,
                    }
                }));
            })
            .catch(err => {
                console.error(err);
            });
    }
    // 获取护士列表
    const getNurseList = () => {
        axios.get('http://8.148.7.123:8000/doctor/list_nurse', {
            params: {
                page: 1,
                size: 100
            }
        }).then(res => {
            setNurseList(res.data.data.map(item => {
                return {
                    value: item.name,
                    label: item.name,
                }
            }));
        }).catch(err => {
            console.error(err);
        });
    }
    const getDepartment = (value) => {  // 选中的科室
        setDepartment(value);
    };
    const getNurse = (value) => {  // 选中的护士
        console.log(value)
        setNurse(value);
    };
    useEffect(() => {
        getTableData();
        getNurseList();
        getDepartmentList();
    }, [])
    return <div>
        {/* 删除弹框 */}
        <Modal title="提示" open={TipModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText='取消' okText='确定'>
            <p>确定删除该项？</p>
        </Modal>
        {/* 编辑弹框 */}
        <Modal title="病床管理" open={editModalOpen} onOk={editOk} onCancel={editCancel} cancelText='取消' okText='确定'>
            <div className="edit_box">
                <div>
                    <label htmlFor="">床位编号</label>
                    <Input disabled value={bedId} style={{ width: '300px' }} />
                </div>
                <div>
                    <label htmlFor="">所属科室</label>
                    <Select placeholder="Select" style={{ width: '150px' }}
                        onChange={getDepartment}
                        value={department}
                        options={departmentList}
                    />
                </div>
                <div>
                    <label htmlFor="oxygen">氧气罐</label>
                    <Radio.Group id='oxygen' onChange={oxygenChange} value={oxygen}>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </div>
                <div>
                    <label htmlFor="heart">心电机</label>
                    <Radio.Group id='heart' onChange={heartChange} value={heart}>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </div>
                <div>
                    <label htmlFor="breath">呼吸机</label>
                    <Radio.Group id='breath' onChange={breathChange} value={breath}>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </div>
                <div>
                    <label htmlFor="icu">急救设备</label>
                    <Radio.Group id='icu' onChange={icuChange} value={icu}>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </div>
                <div>
                    <label htmlFor="aircondition">空调地暖</label>
                    <Radio.Group id='aircondition' onChange={airconditionChange} value={aircondition}>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </div>
                <div>
                    <label htmlFor="tv">电视外设</label>
                    <Radio.Group id='tv' onChange={tvChange} value={tv}>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </div>
                <div>
                    <label htmlFor="nurse">责任护士</label>
                    <Select
                        id='nurse'
                        placeholder="Select"
                        style={{
                            width: 150,
                        }}
                        onChange={getNurse}
                        value={nurse}
                        options={nurseList}
                    />
                </div>
            </div>
        </Modal>
        {contextHolder}
        <div className="inp_box">
            <div>
                <label htmlFor="" style={{ fontWeight: 'bold' }}>床位编号</label>
                <Input className="search_inp" value={query} onChange={queryChange} style={{ width: '240px' }} placeholder="输入床位编号进行查询" />
                <Button type="primary" size="small" onClick={queryBtn}>查询</Button>
            </div>
            <div>
                <Button type="" size="small" onClick={delChecked} disabled={!hasSelected} loading={loading}>删除选中</Button>
            </div>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={tableData} size='small' />
    </div >
}